import React, {Component} from 'react';
import {StyleSheet, ScrollView, Text, View, ImageBackground} from 'react-native';
import {Button, Flex, WhiteSpace, WingBlank, Toast} from '@ant-design/react-native';
import {getBuilingStatisticsByCompanyDataID, getBuilingStatistics} from '~/api/company';
import Svg from 'react-native-svg';
import {VictoryChart, VictoryGroup, VictoryLine, VictoryScatter, VictoryTheme, VictoryLabel, VictoryLegend} from 'victory-native';
import moment from 'moment';
import {getCompanyStatistics} from '~/api/parking';
import {Card} from 'react-native-shadow-cards';
export default class Index extends Component {
    static navigationOptions = {
        title: '总销控',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        //列表
        this.state = {
            interpolation: 'monotoneX',
            ViewCount: 0,
            FavoriteCount: 0,
            OrderCount: 0,
            ParkingPirce: 0,
            ParkingCount: 0,
            list: [],
            Favoritelist: [],
            Orderlist: [],
            Viewlist: [],
        };

        console.disableYellowBox = true;
        let datatime = [];
        datatime = [moment().subtract('days', 6).format('YYYY-MM-DD'), moment().format('yyyy-MM-DD')];
        getCompanyStatistics({
            date_time: datatime,
        }).then((r) => {
            if (r.code === 0) {
                let favolist = [];
                let ordlist = [];
                let vilist = [];
                if (r.data.Favorite.length > 0) {
                    r.data.Favorite.forEach((item, index) => {
                        favolist.push({
                            x: moment(item.RegDate).format('MM-DD'),
                            y: item.FavoriteCount,
                            //label: item.FavoriteCount + '',
                            datatime: moment(item.RegDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                if (r.data.Order.length > 0) {
                    r.data.Order.forEach((item) => {
                        ordlist.push({
                            x: moment(item.OrderDate).format('MM-DD'),
                            y: item.OrderCount,
                            // label: item.OrderCount + '',
                            datatime: moment(item.OrderDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                if (r.data.View.length > 0) {
                    r.data.View.forEach((item) => {
                        vilist.push({
                            x: moment(item.RegDate).format('MM-DD'),
                            y: item.ViewCount,
                            // label: item.ViewCount + '',
                            datatime: moment(item.RegDate).format('yyyy-MM-DD'),
                        });
                    });
                }
                this.setState({
                    Favoritelist: favolist,
                    Orderlist: ordlist,
                    Viewlist: vilist,
                });
            } else {
                Toast.info(r.msg);
            }
        });
        getBuilingStatistics().then((r) => {
            if (r.code === 0) {
                this.setState({
                    ViewCount: r.data.ViewCount,
                    FavoriteCount: r.data.FavoriteCount,
                    OrderCount: r.data.OrderCount,
                    ParkingPirce: r.data.ParkingPirce,
                    ParkingCount: r.data.ParkingCount,
                    list: r.data.lst,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    }

    render() {
        return (
            <ScrollView style={{flex: 1}}>
                <Flex
                    justify={'around'}
                    style={{width: '100%', backgroundColor: 'white', height: 40, padding: 10, borderWidth: 1, borderColor: '#d3d3d3'}}>
                    <Text>总车位数:{this.state.ParkingCount}</Text>
                    <Text>总销售金额:{this.state.ParkingPirce}</Text>
                </Flex>
                <Flex
                    justify={'around'}
                    style={{width: '100%', backgroundColor: 'white', height: 40, padding: 10, borderWidth: 1, borderColor: '#d3d3d3'}}>
                    <Text>总销售量:{this.state.OrderCount}</Text>
                    <Text>总收藏量:{this.state.FavoriteCount}</Text>
                    <Text>总浏览量:{this.state.ViewCount}</Text>
                </Flex>

                <View style={{width: '100%', marginTop: 10}}>
                    <Svg width="100%" height="350">
                        <VictoryChart domainPadding={30} theme={VictoryTheme.material}>
                            <VictoryLegend
                                x={300}
                                y={50}
                                padding={{top: 0, left: 0}}
                                title=""
                                orientation="vertical"
                                style={{labels: {fontSize: 12}}}
                                gutter={50}
                                data={[
                                    {
                                        name: '浏览量',
                                        symbol: {fill: 'green', type: 'square'},
                                    },
                                    {
                                        name: '销售量',
                                        symbol: {fill: 'orange', type: 'square'},
                                    },
                                    {
                                        name: '收藏量',
                                        symbol: {fill: 'red', type: 'square'},
                                    },
                                ]}
                                width={400}
                            />
                            <VictoryLabel text={'最近七日销控图'} x={200} y={10} textAnchor="middle" style={{fontSize: 16}} />
                            <VictoryGroup colorScale={'qualitative'}>
                                <VictoryLine
                                    interpolation={this.state.interpolation}
                                    data={this.state.Viewlist}
                                    style={{data: {stroke: 'green', strokeWidth: 2}}}
                                />
                                <VictoryScatter
                                    data={this.state.Viewlist}
                                    size={12}
                                    style={{data: {fill: 'green'}, labels: {fill: 'white', fontSize: 14}}}
                                    labels={({datum}) => datum.y}
                                    labelComponent={<VictoryLabel dy={8} />}
                                    events={[
                                        {
                                            target: 'data',
                                            eventHandlers: {
                                                onPress: () => {
                                                    return [
                                                        {
                                                            target: 'labels',
                                                            mutation: (props) => {
                                                                this.props.navigation.push('StatisticalList', {
                                                                    // buildid: this.state.buildId,
                                                                    // buildName: this.state.buildName,
                                                                    datatime: props.data[props.index].datatime,
                                                                    type: 1, //1浏览 2销售 3收藏
                                                                });
                                                            },
                                                        },
                                                    ];
                                                },
                                            },
                                        },
                                    ]}
                                />
                                <VictoryLine
                                    interpolation={this.state.interpolation}
                                    data={this.state.Orderlist}
                                    style={{data: {stroke: 'orange', strokeWidth: 2}}}
                                />
                                <VictoryScatter
                                    events={[
                                        {
                                            target: 'data',
                                            eventHandlers: {
                                                onPress: () => {
                                                    return [
                                                        {
                                                            target: 'labels',
                                                            mutation: (props) => {
                                                                this.props.navigation.push('StatisticalList', {
                                                                    buildid: this.state.buildId,
                                                                    buildName: this.state.buildName,
                                                                    datatime: props.data[props.index].datatime,
                                                                    type: 2, //1浏览 2销售 3收藏
                                                                });
                                                            },
                                                        },
                                                    ];
                                                },
                                            },
                                        },
                                    ]}
                                    data={this.state.Orderlist}
                                    size={12}
                                    style={{data: {fill: 'orange'}, labels: {fill: 'white', fontSize: 14}}}
                                    labels={({datum}) => datum.y}
                                    labelComponent={<VictoryLabel dy={8} />}
                                />
                                <VictoryLine
                                    interpolation={this.state.interpolation}
                                    data={this.state.Favoritelist}
                                    style={{data: {stroke: '#c43a31', strokeWidth: 2}}}
                                />
                                <VictoryScatter
                                    events={[
                                        {
                                            target: 'data',
                                            eventHandlers: {
                                                onPress: () => {
                                                    return [
                                                        {
                                                            target: 'labels',
                                                            mutation: (props) => {
                                                                this.props.navigation.push('StatisticalList', {
                                                                    buildid: this.state.buildId,
                                                                    buildName: this.state.buildName,
                                                                    datatime: props.data[props.index].datatime,
                                                                    type: 3, //1浏览 2销售 3收藏
                                                                });
                                                            },
                                                        },
                                                    ];
                                                },
                                            },
                                        },
                                    ]}
                                    data={this.state.Favoritelist}
                                    size={12}
                                    style={{data: {fill: '#c43a31'}, labels: {fill: 'white', fontSize: 14}}}
                                    labels={({datum}) => datum.y}
                                    labelComponent={<VictoryLabel dy={8} />}
                                />
                            </VictoryGroup>
                        </VictoryChart>
                    </Svg>
                </View>
                <WhiteSpace size={'xl'} />
                {this.state.list.map((item) => {
                    return (
                        <Card style={{width: '92%', marginLeft: '4%', marginRight: '4%', paddingTop: 10, paddingBottom: 10, marginTop: 10}}>
                            <Flex
                                style={styles.flex}
                                onPress={() => {
                                    this.props.navigation.navigate('StatisticalImg', {buildid: item.CompanyBuildingID, buildname: item.BuildingName});
                                }}>
                                <View>
                                    <Flex style={{width: '100%', paddingLeft: 10, paddingRight: 10, height: 15}}>
                                        <Text numberOfLines={1} style={styles.lowername}>
                                            {item.BuildingName}
                                        </Text>
                                    </Flex>
                                    <Flex style={{width: '100%', paddingLeft: 10, paddingRight: 10, height: 15, marginTop: 10}}>
                                        <Text style={styles.text}>
                                            销售量: <Text style={styles.ttext}>{item.OrderCount}</Text>
                                        </Text>
                                        <Text style={styles.text}>
                                            浏览量: <Text style={styles.ttext}>{item.ViewCount}</Text>
                                        </Text>
                                        <Text style={styles.text}>
                                            收藏量: <Text style={styles.ttext}>{item.FavoriteCount}</Text>
                                        </Text>
                                        <Text style={styles.text}>
                                            销售金额: <Text style={styles.ttext}>{item.ParkingPirce}</Text>
                                        </Text>
                                    </Flex>
                                </View>
                            </Flex>
                        </Card>
                        // <Flex
                        //     onPress={() => {
                        //         this.props.navigation.navigate('StatisticalImg', {buildid: item.CompanyBuildingID, buildname: item.BuildingName});
                        //     }}
                        //     direction={'column'}
                        //     style={{width: '100%', backgroundColor: 'white', marginTop: 10}}>
                        //     <Text>{item.BuildingName} </Text>
                        //     <Text>
                        //         销售量:{item.OrderCount} 浏览量:{item.ViewCount} 收藏量:{item.FavoriteCount} 销售金额:{item.ParkingPirce}
                        //     </Text>
                        // </Flex>
                    );
                })}
                <WhiteSpace size="xl" />
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    text: {
        paddingRight: 10,
    },
});
